<!DOCTYPE html>
<!--
Copyright 2015 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
  <head>
    <title>Web App Install Banner: Detect Install or Cancel Prompt Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/samples/styles/main.css">
    <link rel="manifest" href="manifest.json">
    <script>
    window.addEventListener('load', function() {

      var outputElement = document.getElementById('output');

      navigator.serviceWorker.register('service-worker.js', { scope: './' })
        .then(function(r) {
          console.log('registered service worker');
        })
        .catch(function(whut) {
          console.error('uh oh... ');
          console.error(whut);
        });
       
      window.addEventListener('beforeinstallprompt', function(e) {
        outputElement.textContent = 'beforeinstallprompt Event fired';
        
        // e.userChoice will return a Promise. For more details read: http://www.html5rocks.com/en/tutorials/es6/promises/
        e.userChoice.then(function(choiceResult) {
          
          console.log(choiceResult.outcome);
          
          if(choiceResult.outcome == 'dismissed') {
            console.log('User cancelled homescreen install');
          }
          else {
            console.log('User added to homescreen');
          }
        });
        
      });
      
    });
    </script>
  </head>
  <body>
    <h1>Web App Install Banner: Detect User Install or Cancel of prompt sample</h1>
    
    <p>Available in <a href="https://www.chromestatus.com/features/4540065577435136">Chrome 42+ (for Android)</a></p>

    <p>The <a href="https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android">web app install banner</a> will prompt the user to add your web app to the users home screen.
    It will only prompt when a number of criteria have been met:
    </p>

    <ul>
      <li>The app uses a <a href="http://www.html5rocks.com/en/tutorials/service-worker/introduction/">service worker</a></li>
      <li>The site is using HTTPS</li>
      <li>The app has a manifest declared</li>
      <li>The manifest has a <code>short_name</code>, 144 pixel icon and a type of 'image/png'</li>
    </ul>
    
    <p>Frequently developers want to know how well the app banner converts a user into an installed experience.  This API and example show you how the developer can understand what the user did when prompted to install the web app.</p>
    
    <p>Below you will see the output of the example. In this example the code will <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">return a promise</a> that will indicate the action of the user. Did they install it, or did they cancel the install.</p>
    
    <pre id=output></pre>

    <p>To see if this example works, come back in a few minutes and you will see the banner.</p>
    <p>For testing we encourage you to force the banner to appear by setting the chrome://flags/#bypass-app-banner-engagement-checks flag.</p>
  </body>
</head>
